<template>
  <view class="add-pet-container">
    <view class="form-header">
      <text class="header-title">添加宠物</text>
      <text class="header-subtitle">完善您的宠物信息</text>
    </view>
    
    <view class="form-section">
      <view class="avatar-upload" @click="chooseImage">
        <image v-if="petAvatar" :src="petAvatar" mode="aspectFill" class="pet-avatar"></image>
        <view v-else class="avatar-placeholder">
          <u-icon name="camera-fill" size="40" color="#999"></u-icon>
          <text class="placeholder-text">点击上传照片</text>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">宠物昵称</text>
        <view class="form-input">
          <input type="text" v-model="petName" placeholder="请输入宠物昵称" />
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">宠物类型</text>
        <view class="pet-type-options">
          <view 
            v-for="(item, index) in petTypes" 
            :key="index" 
            :class="['type-option', petTypeIndex === index ? 'active' : '']"
            @click="selectPetType(index)"
          >
            {{ item }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">品种</text>
        <view class="form-input">
          <picker @change="bindBreedChange" :value="breedIndex" :range="petBreeds">
            <view class="picker-value">
              {{ petBreeds[breedIndex] }}
            </view>
          </picker>
          <view class="picker-arrow">
            <u-icon name="arrow-right" size="24"></u-icon>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">性别</text>
        <view class="gender-options">
          <view 
            v-for="(item, index) in genderOptions" 
            :key="index" 
            :class="['gender-option', genderIndex === index ? 'active' : '']"
            @click="selectGender(index)"
          >
            {{ item }}
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">出生日期</text>
        <view class="form-input">
          <picker mode="date" :value="birthDate" :end="today" @change="bindDateChange">
            <view class="picker-value">
              {{ birthDate }}
            </view>
          </picker>
          <view class="picker-arrow">
            <u-icon name="arrow-right" size="24"></u-icon>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">体重(kg)</text>
        <view class="form-input">
          <input type="digit" v-model="weight" placeholder="请输入宠物体重" />
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">毛色</text>
        <view class="form-input">
          <input type="text" v-model="color" placeholder="请输入宠物毛色" />
        </view>
      </view>
    </view>
    
    <view class="form-section">
      <view class="section-title">健康信息</view>
      
      <view class="form-item">
        <text class="form-label">是否接种疫苗</text>
        <view class="switch-item">
          <switch :checked="isVaccinated" @change="switchVaccine" color="#ff6b00" />
          <text class="switch-text">{{ isVaccinated ? '已接种' : '未接种' }}</text>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">是否绝育</text>
        <view class="switch-item">
          <switch :checked="isSterilized" @change="switchSterilize" color="#ff6b00" />
          <text class="switch-text">{{ isSterilized ? '已绝育' : '未绝育' }}</text>
        </view>
      </view>
      
      <view class="form-item">
        <text class="form-label">备注</text>
        <view class="form-textarea">
          <textarea v-model="remark" placeholder="请输入备注信息（选填）" />
        </view>
      </view>
    </view>
    
    <view class="submit-btn" @click="submitForm">
      <text>保存</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import modal from '@/plugins/modal';

// 宠物基本信息
const petAvatar = ref('');
const petName = ref('');
const petTypes = ref(['猫咪', '狗狗', '其他']);
const petTypeIndex = ref(0);
const genderOptions = ref(['公', '母']);
const genderIndex = ref(0);

// 猫咪品种
const catBreeds = ['橘猫', '英短', '美短', '布偶', '暹罗', '加菲', '其他'];
// 狗狗品种
const dogBreeds = ['金毛', '拉布拉多', '哈士奇', '柴犬', '泰迪', '比熊', '其他'];
// 其他宠物品种
const otherBreeds = ['兔子', '仓鼠', '龙猫', '荷兰猪', '其他'];

// 根据宠物类型显示对应品种
const petBreeds = computed(() => {
  if (petTypeIndex.value === 0) {
    return catBreeds;
  } else if (petTypeIndex.value === 1) {
    return dogBreeds;
  } else {
    return otherBreeds;
  }
});

const breedIndex = ref(0);
const birthDate = ref(formatDate(new Date()));
const today = formatDate(new Date());
const weight = ref('');
const color = ref('');

// 健康信息
const isVaccinated = ref(false);
const isSterilized = ref(false);
const remark = ref('');

// 格式化日期
function formatDate(date) {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 选择宠物类型
function selectPetType(index) {
  petTypeIndex.value = index;
  breedIndex.value = 0; // 重置品种选择
}

// 选择性别
function selectGender(index) {
  genderIndex.value = index;
}

// 品种变化
function bindBreedChange(e) {
  breedIndex.value = e.detail.value;
}

// 日期变化
function bindDateChange(e) {
  birthDate.value = e.detail.value;
}

// 疫苗开关
function switchVaccine(e) {
  isVaccinated.value = e.detail.value;
}

// 绝育开关
function switchSterilize(e) {
  isSterilized.value = e.detail.value;
}

// 选择图片
function chooseImage() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      petAvatar.value = res.tempFilePaths[0];
    }
  });
}

// 提交表单
function submitForm() {
  // 表单验证
  if (!petName.value) {
    return modal.msgError('请输入宠物昵称');
  }
  if (!weight.value) {
    return modal.msgError('请输入宠物体重');
  }
  
  // 显示加载中
  modal.loading('保存中...');
  
  // 模拟提交
  setTimeout(() => {
    modal.closeLoading();
    modal.msgSuccess('添加成功');
    
    // 延迟返回
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }, 1000);
}
</script>

<style lang="scss">
page {
  background-color: #f8f8f8;
}

.add-pet-container {
  padding-bottom: 40rpx;
  
  .form-header {
    padding: 40rpx 30rpx;
    background-color: #ffffff;
    
    .header-title {
      font-size: 36rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      display: block;
    }
    
    .header-subtitle {
      font-size: 26rpx;
      color: #999;
    }
  }
  
  .form-section {
    margin-top: 20rpx;
    background-color: #ffffff;
    padding: 30rpx;
    
    .section-title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 30rpx;
      position: relative;
      padding-left: 20rpx;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 6rpx;
        height: 30rpx;
        background-color: #ff6b00;
        border-radius: 3rpx;
      }
    }
    
    .avatar-upload {
      width: 200rpx;
      height: 200rpx;
      border-radius: 100rpx;
      margin: 0 auto 40rpx;
      overflow: hidden;
      
      .pet-avatar {
        width: 100%;
        height: 100%;
      }
      
      .avatar-placeholder {
        width: 100%;
        height: 100%;
        background-color: #f5f5f5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        
        .placeholder-text {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }
    
    .form-item {
      margin-bottom: 30rpx;
      
      .form-label {
        font-size: 28rpx;
        color: #333;
        margin-bottom: 15rpx;
        display: block;
      }
      
      .form-input {
        height: 80rpx;
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 0 20rpx;
        display: flex;
        align-items: center;
        position: relative;
        
        input {
          flex: 1;
          height: 100%;
          font-size: 28rpx;
        }
        
        .picker-value {
          flex: 1;
          font-size: 28rpx;
        }
        
        .picker-arrow {
          position: absolute;
          right: 20rpx;
          color: #999;
        }
      }
      
      .form-textarea {
        background-color: #f5f5f5;
        border-radius: 8rpx;
        padding: 20rpx;
        
        textarea {
          width: 100%;
          height: 160rpx;
          font-size: 28rpx;
        }
      }
      
      .pet-type-options, .gender-options {
        display: flex;
        
        .type-option, .gender-option {
          flex: 1;
          height: 80rpx;
          background-color: #f5f5f5;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 28rpx;
          margin-right: 20rpx;
          border-radius: 8rpx;
          
          &:last-child {
            margin-right: 0;
          }
          
          &.active {
            background-color: #fff0e5;
            color: #ff6b00;
            border: 1px solid #ff6b00;
          }
        }
      }
      
      .switch-item {
        display: flex;
        align-items: center;
        
        .switch-text {
          margin-left: 20rpx;
          font-size: 28rpx;
        }
      }
    }
  }
  
  .submit-btn {
    width: 90%;
    height: 90rpx;
    background-color: #ff6b00;
    color: #ffffff;
    border-radius: 45rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    margin: 60rpx auto 0;
  }
}
</style>